<template>
  <div class="addAddress">
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="联系人"
        placeholder="你的名字"
        :rules="[{ required: true, message: '请填写用户名' }]"
        style="height: 50px; line-height: 40px; font-size: 17px;"
      />
      <van-field
        name="radio"
        label=""
        style="padding-left: 120px; font-size: 16px; height: 40px; display: flex; align-items: center;"
      >
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="man" icon-size="16px" checked-color="#4cd964"
              >先生</van-radio
            >
            <van-radio
              name="wemen"
              checked
              icon-size="16px"
              checked-color="#4cd964"
              >女士</van-radio
            >
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="phone"
        name="phone"
        label="联系电话"
        placeholder="你的手机号"
        :rules="[{ required: true, message: '请填写联系电话' }]"
        style="height: 50px; line-height: 40px; font-size: 17px;"
      />
      <van-field
        v-model="address"
        name="address"
        label="送餐地址"
        placeholder="小区/写字楼/学校等"
        :rules="[{ required: true, message: '请填写送餐地址' }]"
        style="height: 50px; line-height: 40px; font-size: 17px;"
      />
      <van-field
        v-model="detailAddress"
        name="detailAddress"
        label=""
        placeholder="详细地址（如门牌号等）"
        :rules="[{ required: true, message: '请填写详细地址' }]"
        style="height: 50px; line-height: 40px; font-size: 17px; padding-left: 120px;"
      />
      <van-field
        v-model="tag"
        name="tag"
        label="标签"
        placeholder="无/家/学校/公司"
        :rules="[{ required: true, message: '请填写送餐地址' }]"
        style="height: 50px; line-height: 40px; font-size: 17px;"
      />
      <div style="margin: 16px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          style="height: 40px; background-color: #4cd964; border-radius: 5px; border: none;"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "AddAddress",
  data: function() {
    return {
      username: "",
      password: "",
      radio: "wemen",
      phone: "",
      address: "",
      detailAddress: "",
      tag: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      let uId = JSON.parse(sessionStorage.getItem("user"));
      let userId = uId.id;
      let sex = this.radio == "women" ? 2 : 1;
      let newAddress = {
        user_id: userId,
        address: this.address,
        address_detail: this.detailAddress,
        geohash: "38.014801,112.44796",
        name: this.username,
        phone: this.phone,
        tag: this.tag,
        sex: sex,
        poi_type: 0,
        phone_bk: "",
        tag_type: 2,
      };
      this.axios.post("https://elm.cangdu.org/v1/users/"+newAddress.user_id+"/addresses", newAddress)
        .then((res) => {
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
        // 跳转到选择地址的页面
        this.$router.push({ path: "selectAddress" });
    },
  },
};
</script>

<style lang="less" scoped>
.addAddress {
  /*no*/
  background-color: #f5f5f5;
}
</style>
